/**
 * Created by hao.cheng on 2017/4/13.
 */
import React, {Component} from "react";
import {Layout, Menu, Icon} from "antd";
import {Link} from "react-router";
const {Sider} = Layout;

class SiderCustom extends Component {
    state = {
        collapsed: false,
        mode: "inline",
        openKey: "",
        selectedKey: ""
    };

    componentDidMount() {
        this.setMenuOpen(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.onCollapse(nextProps.collapsed);
        this.setMenuOpen(nextProps);
    }

    getPostion = (str, cha, num) => {
        let x = str.indexOf(cha);
        for (let i = 0; i < num; i++) {
            x = str.indexOf(cha, x + 1);
        }
        return x;
    };

    setMenuOpen = props => {
        let {path} = props;
        //兼容三层目录,三级页不修改，刷新时定位到一级
        let key = path.substr(0, path.lastIndexOf("/"));
        if (key.split("/").length > 3) {
            if (this.state.openKey) return;
            key = key.substring(0, this.getPostion(key, "/", 2));
        }
        this.setState({
            openKey: key,
            selectedKey: path
        });
    };

    onCollapse = collapsed => {
        this.setState({
            collapsed,
            firstHide: collapsed,
            mode: collapsed ? "vertical" : "inline"
        });
    };

    menuClick = e => {
        this.setState({
            selectedKey: e.key
        });
    };
    openMenu = v => {
        this.setState({
            openKey: v[v.length - 1],
            firstHide: false
        });
    };

    render() {
        return (
            <Sider
                trigger={null}
                breakpoint="lg"
                collapsed={this.props.collapsed}
                style={{overflowY: "auto"}}
            >
                <div className="logo"/>
                <Menu
                    onClick={this.menuClick}
                    theme="dark"
                    mode={this.state.mode}
                    selectedKeys={[this.state.selectedKey]}
                    openKeys={
                        this.state.firstHide ? null : [this.state.openKey]
                    }
                    onOpenChange={this.openMenu}
                >
                    <Menu.Item key="1">
                        <Link to={"/app/dashboard/index"}>
                            <Icon type="setting"/>
                            <span className="nav-text">首页</span>
                        </Link>
                    </Menu.Item>
                    <Menu.SubMenu
                        key="sub1"
                        title={
                            <span>
                                <Icon type="setting"/>
                                <span className="nav-text">内容管理</span>
                            </span>
                        }
                    >
                        <Menu.Item key="2">
                            <Link to={"/app/banner/edit"}>轮播图</Link>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Link to={"/app/pkg/packages"}>套餐管理</Link>
                        </Menu.Item>
                        <Menu.Item key="4">
                            <Link to={"/app/court/courts"}>城市工地</Link>
                        </Menu.Item>
                        <Menu.Item key="5">
                            <Link to={"/app/sample/samples"}>案例管理</Link>
                        </Menu.Item>
                    </Menu.SubMenu>
                    <Menu.SubMenu
                        key="sub2"
                        title={
                            <span>
                                <Icon type="setting"/>
                                <span className="nav-text">订单管理</span>
                            </span>
                        }
                    >
                        <Menu.Item key="6">
                            <Link to={"/app/apply/applys"}>预约订单</Link>
                        </Menu.Item>
                        <Menu.Item key="7">
                            <Link to={"/app/signed/signeds"}>签约订单</Link>
                        </Menu.Item>

                    </Menu.SubMenu>

                    <Menu.Item key="8">
                        <Link to={"/app/staffMange/staffs"}>
                            <Icon type="setting"/>
                            <span className="nav-text">员工管理</span>
                        </Link>
                    </Menu.Item>

                    <Menu.Item key="9">
                        <Link to={"/app/admin/admins"}>
                            <Icon type="setting"/>
                            <span className="nav-text">系统管理员</span>
                        </Link>
                    </Menu.Item>
                </Menu>
            </Sider>
        );
    }
}

export default SiderCustom;
